<template>
    <div>
        <Search :search="search" :reset="reset">
            <template v-slot:body>
                <el-form-item label="name" prop="name">
                    <el-input v-model="query.name" name="name" clearable/>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="query.status" placeholder="请选择" clearable multiple>
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
            </template>
        </Search>
        <div class="table-default">
            <Operate :show="open"/>
            <el-table :data="tableData" class="mt-3" v-loading="loading" row-key="id" default-expand-all
                      :tree-props="{ children: 'children' }">
                <el-table-column prop="id" label="id"/>
                <el-table-column prop="name" label="name"/>
                <el-table-column prop="img" label="图片" width="100">
                    <template v-slot:default="scope">
                        <img :src="scope.row.img" :alt="scope.row.img" style="max-width: 100%; height: auto;"/>
                    </template>
                </el-table-column>
                <el-table-column prop="one_file.0.name" label="单文件" />
                <el-table-column prop="many_files" label="多文件">
                    <template #default="scope">
                        <div v-for="(i,subIndex) in scope.row.many_files" :key="subIndex" class="mr-2">
                            {{ i.name }}<br>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="content" label="富文本" show-overflow-tooltip/>
                <el-table-column prop="status" label="状态">
                    <template #default="scope">
                        <Status v-model="scope.row.status" :id="scope.row.id" :api="api" />
                    </template>
                </el-table-column>
                <el-table-column prop="dec" label="浮点数"/>
                <el-table-column prop="number" label="整数"/>
                <el-table-column prop="type" label="多类型-固定值">
                    <template #default="scope">
                        <el-tag v-if="scope.row.type == 1">类型1</el-tag>
                        <el-tag v-else-if="scope.row.type == 2">类型2</el-tag>
                        <el-tag v-else-if="scope.row.type == 3">类型3</el-tag>
                        <el-tag type="danger" v-else>未匹配到</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="datetime" label="时间"/>
                <el-table-column prop="year" label="年"/>
                <el-table-column prop="month" label="月"/>
                <el-table-column prop="date" label="年月日"/>
                <el-table-column prop="json_arr" label="json数组"/>
                <el-table-column prop="cas_class.name" label="分类名称"/>
                <el-table-column prop="created_at" label="创建时间"/>
                <el-table-column prop="updated_at" label="更新时间"/>
                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="scope">
                        <Update @click="open(scope.row.id)"/>
                        <Destroy @click="destroy(api, scope.row.id)"/>
                    </template>
                </el-table-column>
            </el-table>
            <Paginate/>
        </div>

        <Dialog v-model="visible" :title="title" destroy-on-close>
            <Create @close="close(reset)" :primary="id" :api="api"/>
        </Dialog>
    </div>
</template>

<script lang="ts" setup>
import {computed, onMounted} from 'vue'
import Create from './create.vue'
import {useGetList} from '@/composables/curd/useGetList'
import {useDestroy} from '@/composables/curd/useDestroy'
import {useOpen} from '@/composables/curd/useOpen'

const api = 'demo/demo'

const {data, query, search, reset, loading} = useGetList(api)
const {destroy, deleted} = useDestroy()
const {open, close, title, visible, id} = useOpen()

const tableData = computed(() => data.value?.data)

onMounted(() => {
    search()
    deleted(reset)
})
</script>
